<template>
    <div>
        <t-header></t-header>
        <div class="cat">
            <div class="w">
                <a 
                :key="index"
                @click="setCurrentCat(item)"
                :class="item == currentCat ? 'current-cat' : ''"
                v-for="(item ,index) in videoCat"
                href="javascript:;">{{item}}</a>
            </div>
        </div>

        <div class="list-title">{{currentCat}}</div>
        <!-- 视频列表 -->
        <div class="video-list" v-if="currentVideoData != '' || currentVideoData.length != 0">
            <div class="w">
                <div class="list-wrap">
                    <div class="list-item" @click="showPrivece(item)" :key="index" v-for="(item, index) in currentVideoData">
                        <img v-lazy="`http://47.105.157.158:3000/images/video/${item.imgs}`">
                        <div class="mask">
                            <i class="iconfont video-start">&#xe682;</i>
                            <div class="user-info">
                                <div class="video-names">{{item.names}}</div>
                                <img :src="item.users.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.users.avatar}`">
                                <span>天真呀</span>
                            </div>
                        </div>
                        <div class="item-time">{{item.times}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="w">
            <div class="novideo" v-if="currentVideoData == '' || currentVideoData.length == 0">当前分类，暂无视频数据，赶快去个人中心上传吧</div>
        </div>


        <!-- 视频预览 -->
        <video-privece 
        v-if="isShowPrivece"
        :currentPriveceData="currentPriveceData"
        @submitDianZan="submitDianZan($event)"
        @newVideoComment="newVideoComment($event)"
        @newVideoDanMuData="newVideoDanMuData($event)"
        @closePrivece="closePrivece($event)"></video-privece>

    </div>
</template>

<script>
import Header from '../components/global/Header';
import jquery from 'jquery';
import axios from 'axios';
import { onMounted, ref } from '@vue/composition-api';
import VideoPrivece from '../components/global/VideoPrivece';
export default {
    components: {
        't-header': Header,
        'video-privece': VideoPrivece
    },
    setup(props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getVideoCat();
            getCurrentVideoData();
            
        })

        // 当前所在分类
        const currentCat = ref('音MAD');
        // 设置当前所在分类
        const setCurrentCat = function (cat) {
            currentCat.value = cat;
            getCurrentVideoData();
        }

        // 视频分类
        const videoCat = ref('');
        // 获取视频分类
        const getVideoCat = async function() {
            let { data: res } = await axios.get('/video/video/cat');
            if (res.status == 200) {
                videoCat.value = res.cat;
            } else {
                context.parent.$message.error('获取视频分类失败，请刷新后重试');
            }
        }

        // 当前分类视频数据
        const currentVideoData = ref('');
        // 根据当前所在分类获取视频数据
        const getCurrentVideoData = async function () {
            let { data: res} = await axios.get(`/video/video/data/${currentCat.value}`);
            if (res.status == 200) {
                currentVideoData.value = res.data;
            } else {
                context.parent.$message.error('获取分类视频数据失败，请刷新后尝试');
            }
        }

        // 控制显示隐藏预览
        const isShowPrivece = ref(false);
        // 关闭预览
        const closePrivece = function (e) {
            isShowPrivece.value = e;
        }
        // 当前预览的视频信息
        const currentPriveceData = ref('');
        // 显示预览
        const showPrivece = async function (item) {
            // 更新查看次数
            let { data: res } = await axios.post(`/video/video/look/${item._id}`);
            if (res.status != 200)
                return context.parent.$message.error('获取视频信息失败，请稍后重试');
            item = res.newVideo;
            currentPriveceData.value = item;
            isShowPrivece.value = true;
        }

        // 点赞
        const submitDianZan = async function (e) {
            let { data: res } = await axios.post(`/video/video/dianzan/${e}`);
            if (res.status != 200)
                return context.parent.$message.error('点赞失败，遇到未知错误，请重新尝试');
            currentPriveceData.value = res.newVideo;
            context.parent.$message.success('点赞成功，要节制哟~');
        }

        // 更新评论信息
        const newVideoComment = function (e) {
            currentPriveceData.value = e;
            context.parent.$message.success('评论成功');
        }

        // 更新弹幕信息
        const newVideoDanMuData = function (e) {
            currentPriveceData.value = e;
            context.parent.$message.success('发布弹幕成功');
        }


        const methods = 
        { 
            setCurrentCat, 
            closePrivece,
            showPrivece,
            submitDianZan,
            newVideoComment,
            newVideoDanMuData
        }

        return {
            ...methods,
            videoCat,
            currentCat,
            currentVideoData,
            isShowPrivece,
            currentPriveceData
        }
    }   
}
</script>

<style lang="less" scoped>
.cat {
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #fff;
    a {
        margin: 0 12px;
        color: #595959;
        font-size: 14px;
        font-weight: 700;
        &:hover {
            color: #1a8eed;
        }
    }
}

.current-cat {
    color: #1a8eed!important;
}

.video-list {
    .list-wrap {
        columns: auto 3;
        column-gap: 10px;
        .list-item {
            cursor: pointer;
            position: relative;
            &:hover .mask {
                display: block;
            }
            img {
                width: 100%;
                break-inside: avoid;
            }
            .mask {
                display: none;
                break-inside: avoid;
                pointer-events: none;
                .video-start {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 50px;
                    color: rgba(255, 255, 255, .6);
                    font-weight: 700;
                }
                .user-info {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    .video-names {
                        padding-left: 6px;
                        color: #fff;
                        font-weight: 700;
                        padding-bottom: 10px;
                    }
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        vertical-align: middle;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 14px;
                        color: #fff;
                        font-weight: 700;
                    }
                }
            }
            .item-time {
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 99;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border-radius: 6px;
                color: #fff;
                font-weight: 700;
                letter-spacing: 2px;
                background-color: rgba(0, 0, 0, .4);
            }
        }
    }
}

.list-title {
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 26px;
    font-weight: 700;
    background-color: #fff;
    border-bottom: 1px solid #ececec;
    margin-bottom: 20px;
}

.novideo {
    text-align: center;
    padding-top: 50px;
    font-size: 30px;
    color: #999;
    font-weight: 700;
}
</style>